import 'ol/ol.css'
import { Map, View, Feature, Overlay } from 'ol'
import { Point, LineString, Polygon } from 'ol/geom'
import TileLayer from 'ol/layer/Tile'
import { OSM, TileWMS } from 'ol/source'
import VectorLayer from 'ol/layer/Vector'
import VectorSource from 'ol/source/Vector'
// import OSM from "ol/source/OSM";
import WMTSTileGrid from 'ol/tilegrid/WMTS'
import { Projection } from 'ol/proj'
import MVT from 'ol/format/MVT'
import VectorTileLayer from 'ol/layer/VectorTile'
import VectorTileSource from 'ol/source/VectorTile'
import XYZ from 'ol/source/XYZ'
import { toStringHDMS } from 'ol/coordinate'
import { Style, Icon, Stroke, Fill, Text, Circle } from 'ol/style'
import { Select, defaults as defaultInteractions } from 'ol/interaction'
import { Draw } from 'ol/interaction'
import { defaults as defaultControls, ZoomSlider } from 'ol/control'
import ImageLayer from 'ol/layer/Image'
import ImageStatic from 'ol/source/ImageStatic'
import { fromLonLat, toLonLat, transform } from 'ol/proj'
import GeoJSON from 'ol/format/GeoJSON'
export default class MapUnits {
  constructor(data) {
    this.map = null
    this.layerName = ['point', 'maker', 'LineString', 'category3']
    this.markerLayer = {}
    this.initMap()
  }
  initMap() {
    let tileOSM = new TileLayer({
      source: new XYZ({
        url: `https://t{0-7}.tianditu.gov.cn/DataServer?T=img_c&tk=df80fca5cf879b919f55ab28038f983f&x={x}&y={y}&l={z}`,
        projection: 'EPSG:4326',
      })
    })
    let textOSM = new TileLayer({
      // source: new OSM()
      source: new XYZ({
        url: `https://t{0-7}.tianditu.gov.cn/DataServer?T=cia_c&tk=df80fca5cf879b919f55ab28038f983f&x={x}&y={y}&l={z}`,
        projection: 'EPSG:4326',
      })
    });
    for (let layerName of this.layerName) {
      this.markerLayer[layerName] = new VectorLayer({
        source: new VectorSource(),
        zIndex: 3,
        visible: true,
        id: `${layerName}`,
        style:
          `${layerName}` == 'maker'
            ? new Style({
              // image: new Icon({
              //   src: "/gis/img/wlw-dt.png",
              // }),
              image: new Circle({
                //点样式
                radius: 7,
                fill: new Fill({
                  color: '#00c033'
                })
              }),
              fill: new Fill({
                //填充样式
                color: 'rgba(255, 255, 255, 0.2'
              }),
              stroke: new Stroke({
                //线样式
                color: '#00c033',
                width: 2
              })
            })
            : null,
        renderMode: 'webgl' // 使用WebGL渲染器
      })
    }
    this.map = new Map({
      layers: [tileOSM, textOSM, ...Object.values(this.markerLayer)],
      view: new View({
        center: [113.28594543545208, 22.450370381145557],
        projection: 'EPSG:4326',
        zoom: 8,
        maxZoom: 20,
        minZoom: 1
      }),
      target: 'Omap'
    })
    this.map.on('click', (evt) => { })
  }
  getLayer(layerid) {
    return this.map
      .getLayers()
      .getArray()
      .find((item) => item.get('id') == `${layerid}`)
  }
  clearlayers(id) {
    console.log(393, this.getLayer(id))
    this.map.removeLayer(this.getLayer(id))
  }
}
